<template>
    <view v-if="info">
        <view style="position: relative">
            <swiper
                class="swiperbox"
                :current="current"
                @change="handerSwiperChange"
                loop="true"
            >
                <swiper-item v-for="(item, index) in info.images" :key="index">
                    <view
                        class="swiper-item bg-1a flex align-center justify-center"
                        v-if="item.type == 'video'"
                        @click="openVd(item.value)"
                    >
                        <image
                            src="../../static/index/bofang.png"
                            mode=""
                            class="boimg"
                        ></image>
                    </view>
                    <view
                        class="swiper-item"
                        v-if="item.type == 'image'"
                        @click="onPreview(info.images, item.value)"
                    >
                        <image
                            :src="item.value"
                            mode=""
                            class="swiperimg"
                        ></image>
                    </view>
                </swiper-item>
            </swiper>
            <view class="banner-tagitem banner-tagitem_count">
                {{ current + 1 }}/{{ info.images.length }}
            </view>
        </view>
        <!-- 视频 -->
        <u-popup
            v-model="videoshow"
            border-radius="20"
            mode="center"
            :closeable="true"
        >
            <video :src="videourl" controls :id="`video_id`"></video>
        </u-popup>
        <view class="one">
            <view class="u-flex u-row-between">
                <view class="u-flex u-col-bottom" style="align-items: baseline">
                    <view class="price"> <text>￥</text>{{ info_price }} </view>
                    <text class="demo-price-grey">
                        <text>￥</text>{{ hx_price }}
                    </text>
                </view>
                <!-- <button open-type="share">
					
				</button> -->
                <view class="u-flex">
                    <view class="grey">已售： {{ info.sales }}+ </view>
                    <image
                        src="../../static/wImg/enjoy.png"
                        class="enjoy"
                        @click="is_share_show = true"
                    ></image>
                </view>
            </view>

            <view class="title" style="margin-top: 40rpx">
                <block v-if="info.is_zb == 1">
                    <image
                        src="../../static/index/zb.png"
                        mode=""
                        class="zbimg"
                        style="display: inline-block"
                    ></image>
                    <text
                        class="text-28 margin-left-10"
                        style="color: #f43000; margin-right: 20rpx"
                        >直播中</text
                    >
                </block>
                <text class="mark markGre" v-if="shop.isself == 1">平台</text>
                <text class="mark" v-else>商家</text>
                <text class="mark" v-if="info.platform_ms == 1">秒杀</text>
                <text class="mark" v-if="info.platform_bk == 1">折扣</text>
                <text class="line-40 text-32 text-bold">{{ info.title }}</text>
            </view>

            <view class="scrip">
                {{ info.description }}
            </view>
            <!-- <view class="sku">
				<text>已选</text>{{skuName}}
			</view> -->
        </view>
        <view class="card" @click="mobanShow = true" v-if="mobanList.length">
            <view
                class="item_box"
                v-for="(i, _index) in mobanList.slice(0, 3)"
                :key="_index"
            >
                <text class="tit">{{ i.name }}</text>
                <text class="subTit">{{ i.value }}</text>
            </view>
            <u-icon name="arrow-right"></u-icon>
        </view>
        <view
            class="card"
            style="justify-content: space-between"
            @click="openSkuPopup"
        >
            <view style="color: #999; padding-right: 20rpx">选择</view>
            <view class="u-flex u-row-start" style="width: 80%; color: #333">
                <text style="font-size: 26rpx" v-if="changeSkuArr">
                    已选：{{ changeSkuArr }} , {{ selectSkuNum }}件
                </text>
                <text style="font-size: 26rpx; color: #333" v-else>
                    请选择规格
                </text>
            </view>
            <u-icon name="arrow-right"></u-icon>
        </view>

        <view class="two u-flex u-flex-wrap u-row-between">
            <view class="u-flex">
                <text style="font-size: 30rpx">领券中心</text>
                <view
                    class="tu u-flex-center"
                    v-if="index < 2"
                    v-for="(item, index) in couponList"
                    :key="index"
                >
                    满{{ item.limit }}减{{ item.price }}
                    <image src="../../static/wImg/youBg.png"></image>
                </view>
            </view>
            <view
                @click="
                    couponList.length > 0
                        ? (couponShow = true)
                        : $u.toast('暂无优惠券')
                "
            >
                更多<u-icon name="arrow-right"></u-icon>
            </view>
        </view>
        <!--
		 规格
		 <view class="three">
			<view v-for="item in info.spu" style="margin-top:20rpx;">
				<view class="u-flex u-row-between">
					<view>{{item.name}}</view>
					<view class="u-flex" @click="detShow = true">
						更多
						<u-icon name="arrow-right"></u-icon>
					</view>
				</view>
				<view class="u-flex u-flex-wrap">
					<view class="mark" v-for="it,index in item.item">
						{{it.name}}
					</view>
				</view>
			</view>
		</view> -->
        <view class="four" v-if="false">
            <view class="fou_top u-flex u-row-between">
                <view class="u-flex">
                    <image :src="shop.avatar" mode="aspectFill"></image>
                    <view>
                        <view class="fou_tit">{{ shop.shopname }}</view>
                        <view class="fou_peo" v-if="shop.find_user.fans"
                            >{{ shop.find_user.fans }}人关注</view
                        >
                    </view>
                </view>
                <view class="u-flex">
                    <!-- <view class="fou_btn" @click="$func.jump('/wNew/pages/store?id=' + info.shop_id)">全部宝贝</view> -->
                    <view
                        class="fou_btn fou_gre"
                        @click="
                            $func.jump('/wNew/pages/store?id=' + info.shop_id)
                        "
                        >进店逛逛
                    </view>
                </view>
            </view>
            <!-- <view class="fou_bot u-flex u-row-between">
				<view class="fou_grey">宝贝描述：{{shop.score_describe}}</view>
				<view class="fou_grey">商家态度：{{shop.score_service}}</view>
				<view class="fou_grey">物流服务：{{shop.score_logistics}}</view>
			</view> -->
        </view>
        <view class="six u-flex u-row-between">
            <view
                class="six_item"
                @click="sixClick(index)"
                :class="index == sixIndex ? 'six_css' : ''"
                v-for="(item, index) in sixList"
                :key="index"
            >
                {{ item }}
                <view class="line" v-if="index == sixIndex"></view>
            </view>
        </view>
        <view class="seven" v-if="sixIndex == 0">
            <view class="sev_tit">商品详情</view>
            <!-- <rich-text :nodes="info.content"></rich-text> -->
            <u-parse :html="info_content"></u-parse>
            <!-- <rich-text :nodes="info_content"></rich-text> -->
        </view>
        <view v-if="sixIndex == 2">
            <mescroll-body
                :sticky="true"
                ref="mescrollRef"
                @init="mescrollInit"
                @down="downCallback"
                @up="upCallback"
            >
                <view style="padding: 10rpx 10rpx 0">
                    <u-waterfall v-model="flowList" ref="uWaterfall">
                        <template v-slot:left="{ leftList }">
                            <view
                                class="demo-warter"
                                @click="
                                    $func.jump(
                                        '/wNew/pages/detail?id=' + item.id
                                    )
                                "
                                v-for="(item, index) in leftList"
                                :key="index"
                            >
                                <!-- 警告：微信小程序中需要hx2.8.11版本才支持在template中结合其他组件，比如下方的lazy-load组件 -->
                                <u-lazy-load
                                    threshold="-450"
                                    border-radius="10"
                                    :image="item.image"
                                    :index="index"
                                ></u-lazy-load>
                                <view
                                    style="
                                        margin-top: 20rpx;
                                        line-height: 40rpx;
                                    "
                                >
                                    <text
                                        class="mark"
                                        v-if="item.shop.isself == 1"
                                        >平台</text
                                    >
                                    <text class="mark markOra" v-else
                                        >商家</text
                                    >
                                    <text
                                        class="mark markOra"
                                        v-if="item.platform_ms == 1"
                                        >秒杀</text
                                    >
                                    <text
                                        class="mark markOra"
                                        v-if="item.platform_bk == 1"
                                        >折扣</text
                                    >
                                    {{ item.title }}
                                </view>
                                <view class="demo-tag">
                                    <view class="demo-tag-text"> 放心购 </view>
                                    <view
                                        class="demo-tag-text demo-tag-text-grey"
                                    >
                                        特产标签
                                    </view>
                                </view>
                                <view class="demo-price">
                                    <text>￥</text>{{ item.price }}
                                    <text class="demo-price-grey"
                                        >￥{{ item.hx_price }}</text
                                    >
                                </view>
                                <view
                                    class="demo-shop"
                                    @click.stop="
                                        $func.jump(
                                            '/wNew/pages/store?id=' +
                                                item.shop_id
                                        )
                                    "
                                >
                                    <image
                                        src="../../static/wImg/home.png"
                                    ></image>
                                    {{ item.shop.shopname }}
                                    <u-icon
                                        name="arrow-right"
                                        color="#999"
                                    ></u-icon>
                                </view>
                            </view>
                        </template>
                        <template v-slot:right="{ rightList }">
                            <view
                                class="demo-warter"
                                @click="
                                    $func.jump(
                                        '/wNew/pages/detail?id=' + item.id
                                    )
                                "
                                v-for="(item, index) in rightList"
                                :key="index"
                            >
                                <u-lazy-load
                                    threshold="-450"
                                    border-radius="10"
                                    :image="item.image"
                                    :index="index"
                                ></u-lazy-load>
                                <view
                                    style="
                                        margin-top: 20rpx;
                                        line-height: 40rpx;
                                    "
                                >
                                    <text
                                        class="mark"
                                        v-if="item.shop.isself == 1"
                                        >平台</text
                                    >
                                    <text class="mark markOra" v-else
                                        >商家</text
                                    >
                                    <text
                                        class="mark markOra"
                                        v-if="item.platform_ms == 1"
                                        >秒杀</text
                                    >
                                    <text
                                        class="mark markOra"
                                        v-if="item.platform_bk == 1"
                                        >折扣</text
                                    >
                                    {{ item.title }}
                                </view>
                                <view class="demo-tag">
                                    <view class="demo-tag-text"> 放心购 </view>
                                    <view
                                        class="demo-tag-text demo-tag-text-grey"
                                    >
                                        特产标签
                                    </view>
                                </view>
                                <view class="demo-price">
                                    <text>￥</text>{{ item.price }}
                                    <text class="demo-price-grey"
                                        >￥{{ item.hx_price }}</text
                                    >
                                </view>
                                <view
                                    class="demo-shop"
                                    @click.stop="
                                        $func.jump(
                                            '/wNew/pages/store?id=' +
                                                item.shop_id
                                        )
                                    "
                                >
                                    <image
                                        src="../../static/wImg/home.png"
                                    ></image>
                                    {{ item.shop.shopname }}
                                    <u-icon
                                        name="arrow-right"
                                        color="#999"
                                    ></u-icon>
                                </view>
                            </view>
                        </template>
                    </u-waterfall>
                </view>
            </mescroll-body>
        </view>
        <view class="five" v-if="sixIndex == 1">
            <view
                class="fiv_top u-flex u-row-between"
                @click="$func.jump('/wNew/pages/commentList?id=' + id)"
            >
                商品评论 ({{ info.comment }})
                <u-icon name="arrow-right"></u-icon>
            </view>
            <view v-for="item in commentObj">
                <view class="five_in u-flex u-row-between">
                    <view class="u-flex">
                        <image
                            :src="item.user.avatar"
                            mode="aspectFill"
                        ></image>
                        <view>
                            <view class="fiv_tit">{{
                                item.user.nickname
                            }}</view>
                            <!-- <view class="fiv_num">12/15</view> -->
                        </view>
                    </view>
                    <!-- <view class="fiv_btn u-flex-center">回复</view> -->
                </view>
                <view class="fiv_cont" v-html="item.content"></view>
                <view class="u-flex u-flex-wrap">
                    <view
                        class="fen_pho u-flex-center"
                        @click="yu(it, ind)"
                        v-for="(it, ind) in item.images"
                    >
                        <image
                            :src="it"
                            class="img_tu"
                            mode="aspectFill"
                        ></image>
                    </view>
                </view>
            </view>
        </view>
        <view style="height: 200rpx"></view>
        <view
            class="foot u-flex u-row-between"
            :style="'padding-bottom:' + bottom + 'px'"
        >
            <view class="u-flex u-row-between">
                <view
                    class="fot_item"
                    @click="$func.jump('/wNew/pages/store?id=' + info.shop_id)"
                >
                    <image src="../../static/wImg/homeGre.png"></image>
                    店铺
                </view>
                <view
                    class="fot_item"
                    @click="
                        shop.mobile == null
                            ? $u.toast('该店铺未配置')
                            : $func.callPhone(shop.mobile)
                    "
                >
                    <image src="../../static/wImg/message.png"></image>
                    客服
                </view>
                <!-- <button open-type="contact">
					<image src="../../static/wImg/message.png"></image>
					客服
				</button> -->
                <view class="fot_item" @click="collctFn">
                    <image
                        src="../../static/wImg/start.png"
                        v-if="info.likes == 0"
                    ></image>
                    <image src="../../static/wImg/yelStart.png" v-else></image>
                    收藏
                </view>
            </view>
            <view class="fot_right u-flex u-row-between">
                <view
                    class="fot_rig_lef"
                    @click="submit(1)"
                    v-if="info.platform_ms != 1 && info.platform_bk != 1"
                    >加入购物车
                </view>
                <view
                    class="fot_rig_lef fot_rig_rig"
                    @click="submit(2)"
                    v-if="info.platform_ms != 1 && info.platform_bk != 1"
                    >立即购买</view
                >
                <view class="fot_buy_btn" @click="submit(2)" v-else
                    >立即购买</view
                >
            </view>
        </view>

        <u-popup
            border-radius="20"
            safe-area-inset-bottom
            v-model="mobanShow"
            length="70%"
            mode="bottom"
            :closeable="true"
        >
            <view class="moban">
                <view class="mob_tit">商品参数</view>
                <view class="mob_card">
                    <view
                        class="mob_cont"
                        v-for="(item, index) in mobanList"
                        :key="index"
                    >
                        <view class="mob_name">{{ item.name }}</view>
                        <view class="mob_title">{{ item.value }}</view>
                    </view>
                    <view class="mob_tip"
                        >具体信息仅供参考，以实际收货为准。</view
                    >
                </view>
                <view class="mob_btn" @click="mobanShow = false">我知道了</view>
            </view>
        </u-popup>

        <u-popup
            v-model="couponShow"
            length="60%"
            mode="bottom"
            :closeable="true"
        >
            <view class="coupon">
                <view class="cou_tit">优惠券</view>
                <view style="height: 100rpx"></view>
                <view
                    v-for="(item, index) in couponList"
                    :key="index"
                    class="cou_item"
                >
                    <view class="cou_grey" v-if="item.state"></view>
                    <view class="left">
                        <template v-if="item.type == 'discount'">
                            <view class="cou_price">{{ item.discount }}</view>
                            <view style="height: 100%; padding-top: 20rpx">
                                <view class="title">{{ item.name }}</view>
                                <view class="tips u-flex-center"
                                    >满{{ item.limit }}打{{
                                        item.discount
                                    }}折</view
                                >
                                <view class="time">
                                    到期时间：
                                    <view>{{ item.enddate }}</view>
                                </view>
                            </view>
                        </template>
                        <template v-if="item.type == 'reduction'">
                            <view class="cou_price">{{ item.price }}</view>
                            <view style="height: 100%; padding-top: 20rpx">
                                <view class="title">{{ item.name }}</view>
                                <view class="tips u-flex-center"
                                    >满{{ item.limit }}减{{ item.price }}</view
                                >
                                <view class="time">
                                    到期时间：
                                    <view>{{ item.enddate }}</view>
                                </view>
                            </view>
                        </template>
                    </view>
                    <view
                        class="status u-flex-center"
                        @tap="$u.throttle(ling(item, item.id), 1700)"
                    >
                        {{ !item.state ? "立即领取" : "已领取" }}
                    </view>
                </view>
                <view style="height: 10rpx"></view>
            </view>
        </u-popup>
        <sku
            ref="skuPopup"
            v-if="skuKey"
            v-model="skuKey"
            border-radius="20"
            :chooseSKU.sync="chooseSKU"
            :defaultSelect="chooseSKU"
            :localdata="goodsInfo"
            :mode="skuMode"
            @open="onOpenSkuPopup"
            @close="onCloseSkuPopup"
            @add-cart="addCart"
            @buy-now="buyNow"
            @skuChange="skuChange"
        ></sku>

        <u-popup
            v-model="detShow"
            border-radius="20"
            mode="bottom"
            :closeable="true"
        >
            <view class="detail">
                <view class="det_top u-flex">
                    <image
                        class="det_img"
                        :src="thumbnail || info.image"
                    ></image>
                    <view>
                        <view class="price">
                            <text>￥</text>{{ interval_price }}
                        </view>
                        <view class="det_ku" v-if="num">库存：{{ num }}</view>
                        <view class="det_cho"
                            >{{ list.length > 0 ? "已选择" : "请选择" }}
                            <text v-for="item in list">{{
                                item.name
                            }}</text></view
                        >
                    </view>
                </view>
                <view
                    class="det_gui"
                    v-for="(item, index) in info.spu"
                    :key="index"
                >
                    <view class="det_gui_tit">{{ item.name }}</view>
                    <view class="u-flex">
                        <view
                            v-for="(it, ind) in item.item"
                            :key="ind"
                            class="det_gui_con"
                            @click="xuan(item, index, it, ind)"
                            :class="
                                it.type
                                    ? 'det_gui_css'
                                    : it.num
                                    ? 'det_gui_grey'
                                    : ''
                            "
                        >
                            {{ it.name }}
                        </view>
                    </view>
                </view>
                <view class="det_num u-flex u-row-between">
                    购买数量
                    <u-number-box
                        v-model="value"
                        @change="valChange"
                    ></u-number-box>
                </view>
                <view style="padding: 0 20rpx">
                    <view class="det_btn u-flex-center" @click="wan">
                        {{
                            type == 1
                                ? "加入购物车"
                                : type == 2
                                ? "立即购买"
                                : ""
                        }}
                    </view>
                </view>
            </view>
        </u-popup>
        <view class="layer" v-if="is_share_show" @click="is_share_show = false">
            <view class="sharebg" @click.stop>
                <!-- #ifdef H5 -->
                <view class="fenbtn" @click="distributrShare()">
                    <!-- distributrShare -->
                    分享
                </view>
                <!-- #endif -->
                <!-- #ifdef APP-PLUS -->
                <view class="fenbtn" @click="toAppShare">分享</view>
                <!-- #endif -->
                <view
                    class="haibtn"
                    @click="(is_share_show = false), (is_code_show = true)"
                >
                    生成海报
                </view>
            </view>
        </view>
        <view
            class="layer_code"
            v-if="is_code_show"
            @click="is_code_show = false"
        >
            <view class="codebg" @click.stop>
                <image
                    :src="'https://apishop.qiancdj.com' + info.share_image"
                    mode=""
                ></image>
                <view class="code_text">长按保存图片</view>
            </view>
        </view>
        <view class="fenlayer" v-if="is_fen_show" @click="is_fen_show = false">
            <image
                src="../../static/yCreate/share.png"
                mode="widthFix"
                style="width: 500rpx; margin-right: 30rpx"
            >
            </image>
        </view>
    </view>
</template>

<script>
import sku from "@/uni_modules/vk-data-goods-sku-popup/components/vk-data-goods-sku-popup/vk-data-goods-sku-popup.vue";
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
import siteInfo from "@/siteinfo.js";
export default {
    mixins: [MescrollMixin], // 使用mixin
    components: {
        sku,
    },
    data() {
        return {
            oneIndex: 0,
            twoIndex: 0,
            sixList: ["商品详情", "商品评价", "相关推荐"],
            sixIndex: 0,
            id: "",
            info: "",
            info_price: 0,
            shop: {},
            couponList: [],
            couponShow: false,
            detShow: false,
            value: 1,
            list: [],
            interval_price: 0,
            thumbnail: "",
            num: 0,
            commentObj: [],
            flowList: [],
            type: "",
            sku_id: "",
            sku: {},
            bottom: 0,
            info_content: [],
            chooseSKU: {
                sku: [],
                num: 1,
            },
            skuKey: false,
            // SKU弹窗模式
            skuMode: 1,
            // 后端返回的商品信息
            goodsInfo: {},
            current: 0,
            videoContexts: {},
            jsapi: "",
            is_share_show: false,
            is_code_show: false,
            is_fen_show: false,
            videoshow: false,
            mobanShow: false,
            videourl: "",
            mobanList: [],
            changeSkuArr: "",
            selectSkuNum: 1,
        };
    },
    async onShow() {
        // #ifdef H5
        if (this.$jweixin.isWechat()) {
            await this.$jweixin.initJssdk();
        }
        // #endif
    },
    onLoad(options) {
        this.id = options.id;
        this.detailFn();

        let res = uni.getSystemInfoSync();
        if (res.safeAreaInsets.bottom == 0) {
            this.bottom = 20;
        } else {
            this.bottom = res.safeAreaInsets.bottom;
        }
        let that = this;
        that.init(options);
    },
    created() {
        this.videoContexts = uni.createVideoContext(`video_id`, this);
    },
    methods: {
        skuChange(e) {
            this.changeSkuArr = e.selectArrChange.join(" ");
            this.selectSkuNum = e.selectNumChange || 1;
            console.log(e, "change+++++++++++++++++++");
        },
        imgClick(e) {
            console.log(e);
        },
        //图片预览
        onPreview(list, currentItem) {
            let imgArray = [];
            list.map((item) => {
                imgArray.push(item.value);
            });
            console.log("AAAAAAA", imgArray, currentItem);
            uni.previewImage({
                current: currentItem,
                urls: imgArray,
                indicator: "number",
                loop: true,
            });
        },
        openVd(url) {
            this.videourl = url;
            this.videoshow = true;
            this.videoContexts.play();
        },
        handerSwiperChange(e) {
            let { current } = e.detail;
            this.current = current;
            this.videoContexts.pause();
        },
        sixClick(index) {
            this.sixIndex = index;
        },
        yu(it, ind) {
            // 预览图片
            let imgsArray = [];
            imgsArray.push(it);
            uni.previewImage({
                current: ind,
                urls: imgsArray,
            });
        },
        detailFn() {
            this.$u
                .post("/api/wanlshop/product/goods", {
                    id: this.id,
                })
                .then((res) => {
                    if (res.code == 1) {
                        this.info = res.data;

                        this.mobanList = res.data.category_attributes;

                        let richtext = this.info.content;
                        const regex = new RegExp("<img", "gi");
                        this.info_content = richtext.replace(
                            regex,
                            '<img style="max-width: 100%;"'
                        );

                        this.info_price = Number(this.info.price).toFixed(2);
                        this.hx_price = Number(this.info.hx_price).toFixed(2);
                        this.shop = res.data.shop;
                        this.couponList = res.data.coupon;
                        this.commentObj = res.data.comment_list.data;
                        this.interval_price = Number(this.info.price).toFixed(
                            2
                        );
                    }
                });
            this.$u
                .post("/api/index/get_jsapi", {
                    id: this.id,
                })
                .then((res) => {
                    if (res.code == 1) {
                    }
                });
        },
        xuan(item, index, it, ind) {
            console.log("+++++++++");
            if (!it.type) {
                item.item.map((it) => {
                    it.type = false;
                });
                it.type = true;
                if (this.list.length == 0) {
                    this.list.push({
                        id: item.id,
                        name: it.name,
                    });
                } else {
                    var indexs = this.list
                        .map(function (items) {
                            return items.id;
                        })
                        .indexOf(item.id);

                    if (indexs != -1) {
                        this.list.splice(indexs, 1);
                        this.list.push({
                            id: item.id,
                            name: it.name,
                        });
                    } else {
                        this.list.push({
                            id: item.id,
                            name: it.name,
                        });
                    }
                }
                this.$u
                    .post("/api/index/get_stock", {
                        goods_id: this.id,
                        content: this.list,
                    })
                    .then((res) => {
                        if (res.code == 1) {
                            this.interval_price = Number(
                                res.data.price
                            ).toFixed(2);
                            this.thumbnail = res.data.thumbnail;
                            this.num = res.data.num;
                            this.sku_id = res.data.sku_id;
                            this.sku = res.data.sku;
                        }
                    });
            } else {
                it.type = false;
                var indexs = this.list
                    .map(function (items) {
                        return items.id;
                    })
                    .indexOf(item.id);

                this.list.splice(indexs, 1);
            }
        },
        valChange(e) {
            console.log("当前值为: " + e.value);
        },
        upCallback(page) {
            this.mescroll.optDown.use = false;
            this.mescroll.optUp.textNoMore = "- 已经到底啦 -";
            this.$u
                .post("/api/wanlshop/product/likes", {
                    page: page.num,
                    limit: page.size,
                    pages: "goods",
                    location_city: uni.getStorageSync("location_city")
                        ? uni.getStorageSync("location_city")
                        : "",
                    location_city2: uni.getStorageSync("location_city2")
                        ? uni.getStorageSync("location_city2")
                        : "",
                    goods_id: this.id,
                })
                .then((res) => {
                    this.mescroll.endBySize(
                        res.data.data.length,
                        res.data.total
                    );
                    if (page.num == 1) this.flowList = []; //如果是第一页需手动制空列表
                    this.flowList = this.flowList.concat(res.data.data); //追加新数据
                })
                .catch(() => {
                    //联网失败, 结束加载
                    this.mescroll.endErr();
                });
        },
        collctFn() {
            this.$u
                .post("/api/wanlshop/product/follow", {
                    id: this.id,
                })
                .then((res) => {
                    if (res.code == 1) {
                        this.detailFn();
                    }
                });
        },
        submit(type) {
            this.type = type;
            // this.detShow = true
            this.openSkuPopup();
        },
        ling(item, id) {
            if (!item.state) {
                uni.showToast({
                    title: id,
                });
                this.$u
                    .post("/api/wanlshop/coupon/receive", {
                        id: id,
                    })
                    .then((res) => {
                        if (res.code == 1) {
                            this.$u.toast(res.data.msg);
                            this.couponShow = false;
                            this.detailFn();
                        } else {
                            this.$u.toast(res.msg);
                            this.couponShow = false;
                        }
                    });
            }
        },
        wan() {
            return false;
            if (this.list.length < this.info.spu.length) {
                this.$u.toast("请选择所有规格");
            } else {
                if (this.type == 1) {
                    let data = {
                        goods_id: this.id,
                        image: this.info.image,
                        number: this.value,
                        shop_id: this.info.shop_id,
                        shop_name: this.info.shop.shopname,
                        sku: this.sku,
                        sku_id: this.sku_id,
                        sum:
                            Number(this.interval_price).toFixed(2) * this.value,
                        title: this.info.title,
                    };
                    this.$u
                        .post("/api/wanlshop/cart/storage", {
                            data: data,
                            type: "add",
                        })
                        .then((res) => {
                            if (res.code == 1) {
                                this.$u.toast(res.msg);
                                this.skuKey = false;
                            } else {
                                this.$u.toast(res.msg);
                            }
                        });
                } else {
                    let list = [
                        {
                            goods_id: this.id,
                            number: this.value,
                            sku_id: this.sku_id,
                        },
                    ];
                    this.$func.jump(
                        "/yCreate/pages/confirmOrder?ids=" +
                            JSON.stringify(list)
                    );
                }
            }
        },
        // 初始化
        init(options = {}) {},
        // 获取商品信息，并打开sku弹出
        openSkuPopup() {
            let that = this;
            let info = that.info;
            /**
             * 获取商品信息
             * 这里可以看到每次打开SKU都会去重新请求商品信息,为的是每次打开SKU组件可以实时看到剩余库存
             */
            // 此处写接口请求，并将返回的数据进行处理成goodsInfo的数据格式，
            // goodsInfo是后端返回的数据
            that.goodsInfo = {
                id: info.id,
                title: info.title,
                image: info.image,
                sku_list: info.sku,
                spu: info.spu,
            };
            that.goodsInfo.sku_list.map((item, index) => {
                that.info.sku.map((items, indexs) => {
                    if (index == indexs) {
                        item.image = items.thumbnail
                            ? items.thumbnail
                            : this.info.image;
                    }
                });
            });
            that.skuKey = true;
        },
        // sku组件 开始-----------------------------------------------------------
        onOpenSkuPopup() {
            console.log("监听 - 打开sku组件");
        },
        onCloseSkuPopup() {
            console.log("监听 - 关闭sku组件");
        },
        // 加入购物车前的判断
        addCartFn(obj) {
            let { selectShop } = obj;
            // 模拟添加到购物车,请替换成你自己的添加到购物车逻辑
            let res = {};
            let name = selectShop.goods_name;
            if (selectShop.sku_name != "默认") {
                name += "-" + selectShop.sku_name_arr;
            }
            res.msg = `${name} 已添加到购物车`;
            if (typeof obj.success == "function") obj.success(res);
        },
        // 加入购物车按钮
        addCart(selectShop) {
            let that = this;
            if (that.info.platform_bk == 1 || that.info.platform_ms == 1) {
                uni.showModal({
                    content: "此商品不能加入购物车购买",
                    showCancel: false,
                });
                return false;
            }

            console.log(selectShop, "监听 - 加入购物车");

            let data = {
                goods_id: this.id,
                image: this.info.image,
                number: selectShop.buy_num,
                shop_id: this.info.shop_id,
                shop_name: this.info.shop.shopname,
                sku: selectShop.difference,
                sku_id: selectShop.id,
                sum: Number(selectShop.price).toFixed(2) * selectShop.buy_num,
                title: this.info.title,
            };
            this.$u
                .post("/api/wanlshop/cart/storage", {
                    data: data,
                    type: "add",
                })
                .then((res) => {
                    if (res.code == 1) {
                        this.$u.toast(res.msg);
                        this.skuKey = false;
                    } else {
                        this.$u.toast(res.msg);
                    }
                });
        },
        // 立即购买
        buyNow(selectShop) {
            console.log(selectShop, "监听 - 立即购买");
            this.$u
                .post("/api/wanlshop/product/stock", {
                    sku_id: selectShop.id,
                })
                .then((res) => {
                    if (res.code == 1) {
                        if (res.data == 0) {
                            return false;
                            this.$u.toast("库存不足");
                        } else {
                            let list = [
                                {
                                    goods_id: this.id,
                                    number: selectShop.buy_num,
                                    sku_id: selectShop.id,
                                },
                            ];
                            this.$func.jump(
                                "/yCreate/pages/confirmOrder?ids=" +
                                    JSON.stringify(list)
                            );
                        }
                    }
                });
            return;
            let that = this;
            console.log(selectShop, "监听 - 立即购买");
            // that.addCartFn({
            // 	selectShop: selectShop,
            // 	success: function(res) {
            // 		// 实际业务时,请替换自己的立即购买逻辑
            // 		that.toast("立即购买");
            // 	}
            // });
        },
        toast(msg) {
            uni.showToast({
                title: msg,
                icon: "none",
            });
        },
        distributrShare() {
            // #ifdef H5
            let jweixin = require("jweixin-module");
            // #endif
            this.$u
                .post("/api/index/get_jsapi", {
                    id: this.id,
                })
                .then((res) => {
                    if (res.code == 1) {
                        console.log(jweixin, "jweixin");
                        var _self = jweixin.config({
                            debug: false,
                            // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                            appId: res.data.appid,
                            // 必填，公众号的唯一标识
                            timestamp: res.data.timestamp,
                            // 必填，生成签名的时间戳
                            nonceStr: res.data.nonceStr,
                            // 必填，生成签名的随机串
                            signature: res.data.signature,
                            // 必填，签名
                            jsApiList: res.data.jsApiList, // 必填，需要使用的JS接口列表
                        });
                        console.log(_self);

                        jweixin.ready(function (res) {
                            //分享给朋友
                            jweixin.updateAppMessageShareData({
                                title: "千创家无忧",
                                link: "https://api.qiancdj.com/h5/",
                                imgUrl: "https://api.qiancdj.com/attachment/image/666/24/03/3efc30cc17a74b0e9503ae1603f1a898.jpg",
                                trigger: function trigger(res) {
                                    // alert(res);
                                },
                                success: function success(res) {
                                    // alert('已分享');
                                },
                                cancel: function cancel(res) {
                                    // alert('已取消');
                                },
                                fail: function fail(res) {
                                    // alert(2, JSON.stringify(res));
                                },
                            });
                        });
                        this.is_share_show = false;
                        this.is_fen_show = true;
                    }
                });
        },
        getfen() {
            // uni.share({
            // 	provider: 'weixin',
            // 	type: 5,
            // 	title: '千创家无忧',
            // 	imageUrl: 'https://api.qiancdj.com/attachment/image/666/24/03/3efc30cc17a74b0e9503ae1603f1a898.jpg',
            // 	success: function(res) {
            // 		console.log('分享成功：' + JSON.stringify(res));
            // 	},
            // 	fail: function(err) {
            // 		console.error('分享失败：' + JSON.stringify(err));
            // 	}
            // });
        },
        toAppShare() {
            let { id, title, image: imageUrl } = this.info;
            let summary = "";
            let { siteroot } = siteInfo;
            let url = siteroot.split("/index.php")[0];
            let href =
                "https://apishop.qiancdj.com/h5/#/wNew/pages/detail?id=" +
                this.id;
            // #ifdef H5
            this.$jweixin.wxReady(() => {
                this.$jweixin.showOptionMenu();
                this.$jweixin.shareAppMessage(title, summary, href, imageUrl);
                this.$jweixin.shareTimelineMessage(title, href, imageUrl);
            });
            // #endif
            // #ifdef APP-PLUS
            uni.share({
                provider: "weixin",
                scene: "WXSceneSession",
                type: 0,
                href,
                title,
                summary,
                imageUrl,
                success: function (res) {
                    console.log("success:" + JSON.stringify(res));
                },
                fail: function (err) {
                    console.log("fail:" + JSON.stringify(err));
                },
            });
            // #endif
        },
    },
    onShareAppMessage: function (res) {
        if (res.from === "button") {
            // 来自按钮的转发
            console.log(res.target);
        }
        return {
            path: "https://api.qiancdj.com/h5/",
            title: "千创家无忧",
            imageUrl:
                "https://api.qiancdj.com/attachment/image/666/24/03/3efc30cc17a74b0e9503ae1603f1a898.jpg",
        };
    },
};
</script>

<style lang="scss" scoped>
@import "@/styles/index.wxss";
@import url(@/components/common.css);

.app {
    padding: 30rpx;
    font-size: 28rpx;
}

.one {
    background: #fff;
    padding: 30rpx;

    .title {
        font-size: 36rpx;
        font-weight: bold;
        color: #333;

        .mark {
            padding: 6rpx 10rpx;
            // width: 73rpx;
            // height: 38rpx;
            font-size: 26rpx;
            color: #fff;
            background: #ef5205;
            border-radius: 4rpx;
            margin-right: 10rpx;
            position: relative;
            bottom: 3rpx;
            // line-height: 38rpx;
        }

        .markGre {
            background: #606dce;
        }
    }

    .grey {
        color: #919191;
        font-size: 24rpx;
        margin-right: 3vw;
    }

    .enjoy {
        width: 40rpx;
        height: 40rpx;
    }
}

.price {
    color: #ef5205;
    font-size: 42rpx;
    // height: 52rpx;
    font-weight: bold;

    text {
        font-size: 20rpx;
    }
}

.two {
    background: #fff;
    padding: 30rpx;
    font-size: 28rpx;
    color: #333;
    margin-top: 20rpx;
    // line-height: 80rpx;
    display: flex;
    align-items: center;

    text {
        margin-right: 24rpx;
    }

    .tu {
        position: relative;
        width: 168rpx;
        height: 46rpx;
        color: #ef5205;
        font-size: 22rpx;
        margin-right: 24rpx;

        image {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
        }
    }
}

.three {
    padding: 10rpx 30rpx 30rpx;
    margin-top: 20rpx;
    background: #fff;

    .mark {
        color: #333;
        margin-top: 20rpx;
        margin-right: 22rpx;
        background: #f7f7f7;
        border-radius: 10rpx;
        padding: 20rpx 16rpx;
    }

    .markCss {
        color: #fff;
        background: #606dce;
    }
}

.four {
    padding: 30rpx;
    margin-top: 20rpx;
    background: #fff;

    image {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        margin-right: 18rpx;
    }

    .fou_tit {
        font-size: 28rpx;
        color: #333;
    }

    .fou_grey {
        font-size: 20rpx;
        color: #666;
        margin-top: 8rpx;
    }

    .fou_btn {
        width: 116rpx;
        height: 42rpx;
        font-size: 20rpx;
        color: #606dce;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 28rpx;
        border: 2rpx solid #606dce;
        margin-left: 37rpx;
    }

    .fou_gre {
        color: #fff;
        background: #606dce;
    }

    .fou_bot {
        margin-top: 26rpx;
    }

    .fou_grey {
        font-size: 24rpx;
        color: #999;
    }
}

.five {
    padding: 0 30rpx 0rpx;
    margin-top: 20rpx;
    background: #fff;

    .fiv_top {
        padding: 30rpx 0;
    }

    .five_in {
        padding: 20rpx 0;
        border-top: 1rpx solid #efefef;

        image {
            width: 80rpx;
            height: 80rpx;
            border-radius: 50%;
            margin-right: 20rpx;
        }

        .fiv_tit {
            font-size: 28rpx;
            font-weight: bold;
            color: #333;
        }

        .fiv_num {
            font-size: 24rpx;
            color: #333;
            margin-top: 7rpx;
        }

        .fiv_btn {
            width: 104rpx;
            height: 40rpx;
            font-size: 20rpx;
            font-weight: bold;
            color: #fff;
            border-radius: 20rpx;
            background: linear-gradient(to right, #2bb984, #8cd994);
        }
    }

    .fiv_cont {
        font-size: 28rpx;
        color: #333333;
        padding-bottom: 20rpx;
    }

    .fen_pho {
        width: 168rpx;
        height: 168rpx;
        border-radius: 20rpx;
        overflow: hidden;
        margin-right: 28rpx;
        margin-bottom: 28rpx;

        .img_tu {
            width: 100%;
            height: 100%;
        }
    }
}

.six {
    padding: 0 90rpx;
    margin-top: 20rpx;
    background: #fff;

    .six_item {
        font-size: 28rpx;
        color: #333;
        padding: 20rpx 0 30rpx 0;
        position: relative;

        .line {
            bottom: 0;
            left: 0;
            right: 0;
            margin: 0 auto;
            position: absolute;
            width: 60rpx;
            height: 6rpx;
            background: #606dce;
            border-radius: 3rpx;
        }
    }

    .six_css {
        color: #606dce;
        font-weight: bold;
    }
}

.seven {
    padding: 20rpx 30rpx;
    margin-top: 20rpx;
    background: #fff;

    .sev_tit {
        font-size: 28rpx;
        color: #333;
    }
}

.foot {
    position: fixed;
    width: 100%;
    bottom: 0;
    padding: 22rpx 30rpx;
    background: #fff;

    .fot_item {
        display: flex;
        flex-direction: column;
        align-items: center;
        font-size: 28rpx;
        color: #222;
        margin-right: 48rpx;

        image {
            width: 40rpx;
            height: 36rpx;
            margin-bottom: 10rpx;
        }
    }
}

.fot_right {
    width: 376rpx;
    height: 80rpx;
    border-radius: 0rpx 44rpx 44rpx 0rpx;

    .fot_rig_lef {
        width: 50%;
        height: 100%;
        display: flex;
        color: #fff;
        align-items: center;
        justify-content: center;
        background: #606dce;
        border-radius: 44rpx 0 0 44rpx;
    }

    .fot_rig_rig {
        height: 100%;
        background: #8cd994;
        border-radius: 0 44rpx 44rpx 0;
    }
}

button::after {
    border: none;
}

button {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 28rpx;
    color: #222;
    margin-right: 48rpx;
    padding-top: 14rpx !important;

    image {
        width: 40rpx;
        height: 36rpx;
    }
}

.coupon {
    height: 100%;
    padding: 0 30rpx;
    background-color: #f6f6f6;

    .cou_tit {
        padding: 30rpx 0;
        text-align: center;
        font-weight: bold;
        background: #f6f6f6;
        position: fixed;
        top: 0;
        width: 100%;
        z-index: 3;
    }

    .cou_item {
        margin-bottom: 40rpx;
        position: relative;
        width: 100%;
        height: 210rpx;
        overflow: hidden;
        border-radius: 30rpx;

        .cou_grey {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            z-index: 2;
            background: rgba(76, 76, 76, 0.5);
        }

        .left {
            width: 471rpx;
            height: 210rpx;
            background: #fff;
            padding: 27rpx 40rpx 0rpx 30rpx;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .code {
                font-size: 22rpx;
                color: #666666;
            }

            .cou_price {
                margin-right: 25rpx;
                color: #e55d23;
                font-size: 88rpx;
                font-weight: 550;

                text {
                    margin-top: 32rpx;
                    font-size: 26rpx;
                    margin-right: 10rpx;
                }
            }

            .title {
                font-size: 26rpx;
                font-weight: bold;
                color: #333333;
            }

            .tips {
                margin-top: 10rpx;
                width: 154rpx;
                height: 31rpx;
                background: #e55d23;
                font-size: 20rpx;
                color: #ffffff;
            }

            .time {
                height: 20rpx;
                font-size: 22rpx;
                color: #666666;
                margin-top: 35rpx;
            }
        }

        .status {
            width: 220rpx;
            height: 210rpx;
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
            font-size: 30rpx;
            font-weight: bold;
            color: #fff;
            background: #606dce;
        }
    }
}

.detail {
    padding-bottom: 50rpx;

    .det_top {
        flex: 1;
        padding: 20rpx;

        .det_img {
            width: 200rpx;
            height: 200rpx;
            border-radius: 20rpx;
            margin-right: 20rpx;
        }

        .det_ku {
            color: #949494;
            margin-top: 10rpx;
            font-size: 28rpx;
        }

        .det_cho {
            margin-top: 8rpx;

            text {
                margin-left: 10rpx;
            }
        }
    }

    .det_gui {
        padding: 0 20rpx 20rpx;
        border-top: 1rpx solid #f1f1f1;

        .det_gui_tit {
            padding: 20rpx 0;
        }

        .det_gui_con {
            background: #f6f6f6;
            padding: 10rpx 20rpx;
            border-radius: 10rpx;
            margin-right: 20rpx;
            box-sizing: border-box;
        }

        .det_gui_css {
            color: #fff;
            background: #606dce;
        }

        .det_gui_grey {
            color: red;
        }
    }

    .det_num {
        font-size: 32rpx;
        padding: 30rpx 20rpx;
        border-top: 1rpx solid #f1f1f1;
    }

    .det_btn {
        width: 100%;
        height: 80rpx;
        color: #fff;
        font-size: 32rpx;
        font-weight: bold;
        border-radius: 50rpx;
        background: #606dce;
    }
}

// 推荐商品
.demo-warter {
    border-radius: 8px;
    margin: 5px;
    background-color: #ffffff;
    padding: 8px;
    position: relative;

    .mark {
        font-size: 20rpx;
        color: #fff;
        padding: 6rpx 10rpx;
        background: #606dce;
        border-radius: 4rpx;
        margin-right: 20rpx;
    }

    .markOra {
        background: #ef5205;
    }
}

.demo-image {
    width: 100%;
    border-radius: 4px;
}

.demo-title {
    // font-size: 30rpx;
    // margin-top: 5px;
    // color: $u-main-color;
}

.demo-tag {
    display: flex;
    margin-top: 5px;
}

.demo-tag-owner {
    background-color: $u-type-error;
    color: #ffffff;
    display: flex;
    align-items: center;
    padding: 4rpx 14rpx;
    border-radius: 50rpx;
    font-size: 20rpx;
    line-height: 1;
}

.demo-tag-text {
    border: 1px solid #f43000;
    color: #f43000;
    margin-right: 8px;
    line-height: 1;
    padding: 8rpx 24rpx 8rpx 16rpx;
    display: flex;
    align-items: center;
    border-radius: 4rpx;
    font-size: 20rpx;
}

.demo-tag-text-grey {
    border: 1px solid #999;
    color: #999;
}

.demo-price {
    font-size: 30rpx;
    color: $u-type-error;
    margin-top: 5px;
    font-weight: bold;
    font-size: 32rpx;
}

text {
    font-size: 20rpx;
}

.demo-price-grey {
    color: #d3d3d3;
    font-size: 20rpx;
    font-weight: 400;
    margin-left: 18rpx;
    text-decoration: line-through;
}

.demo-shop {
    font-size: 22rpx;
    color: $u-tips-color;
    margin-top: 5px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;

    image {
        width: 20rpx;
        height: 20rpx;
        margin-right: 8rpx;
    }
}

.swiperbox {
    width: 100%;
    height: 750rpx;
    position: relative;
}

.swiperimg {
    width: 100%;
    height: 100%;
}

swiper-item {
    width: 100%;
    height: 100%;
}

.swiper-item {
    width: 100%;
    height: 100%;
    position: relative;
}

.banner-tagitem_count {
    background: rgba(0, 0, 0, 0.5);
    color: #fff;
    position: absolute;
    bottom: 32rpx;
    right: 32rpx;
    z-index: 10;
    width: 90rpx;
    height: 42rpx;
    line-height: 42rpx;
    border-radius: 21rpx;
    text-align: center;
}

.fot_buy_btn {
    width: 376rpx;
    height: 80rpx;
    border-radius: 44rpx;
    display: flex;
    color: #fff;
    align-items: center;
    justify-content: center;
    background: #6f9bdf;
}

.layer {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    display: flex;
    align-items: flex-end;
}

.sharebg {
    padding: 50rpx 0;
    background: #fff;
    border-radius: 12rpx 12rpx 0 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
}

.fenbtn {
    width: 40%;
    height: 90rpx;
    background: #606dce;
    border-radius: 12rpx;
    text-align: center;
    line-height: 90rpx;
    font-size: 30rpx;
    color: #fff;
}

.haibtn {
    width: 40%;
    height: 90rpx;
    background: #8cd994;
    border-radius: 12rpx;
    text-align: center;
    line-height: 90rpx;
    font-size: 30rpx;
    color: #fff;
}

.layer_code {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
}

.fenlayer {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    display: flex;
    justify-content: flex-end;
}

.codebg {
    width: 85%;
    // height: 700rpx;
    background: #fff;
    border-radius: 12rpx;
    padding: 30rpx;
}

.codebg image {
    width: 100%;
    height: 750rpx;
}

.code_text {
    margin-top: 30rpx;
    text-align: center;
    color: #666666;
    font-size: 28rpx;
}

.mask {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    background-color: rgba(0, 0, 0, 0.3);
}

.product-img {
    width: 180rpx;
    height: 180rpx;
    border-radius: 20rpx;
}

.zbimg {
    width: 28rpx;
    height: 28rpx;
}

video {
    width: 100vw;
    height: calc(60vh);
}

.boimg {
    width: 200rpx;
    height: 200rpx;
}

.scrip {
    margin-top: 30rpx;
    color: #999;
    font-size: 26rpx;
}
.demo-price-grey {
    color: #d3d3d3;
    font-size: 20rpx;
    font-weight: 400;
    margin-left: 18rpx;
    text-decoration: line-through;
}
.card {
    width: 100%;
    margin: 20rpx 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    padding: 32rpx;
    .item_box {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
        flex: 1;
        border-right: 1rpx solid #f5f5f5;
        .tit {
            font-size: 28rpx;
            line-height: 1.6rem;
            color: #999;
        }
        .subTit {
            font-size: 28rpx;
            color: #333;
            font-weight: bold;
        }
    }
    .item_box:nth-child(3) {
        border-right: none;
    }
}
.moban {
    width: 100%;
    height: 100%;
    padding: 0 20rpx;
    box-sizing: border-box;
    background: #f6f6f6;
    .mob_tit {
        font-size: 36rpx;
        padding: 30rpx 0;
        font-weight: bold;
        color: #333;
        text-align: center;
    }
    .mob_card {
        width: 100%;
        background: white;
        border-top-left-radius: 20rpx;
        border-top-right-radius: 20rpx;
        padding: 10rpx 30rpx 200rpx 30rpx;
        box-sizing: border-box;
        .mob_cont {
            width: 100%;
            display: flex;
            justify-content: start;
            align-items: center;
            padding: 30rpx 10rpx;
            box-sizing: border-box;
            font-size: 30rpx;
            color: #333;
            border-bottom: 1rpx solid #f0f0f0;
            .mob_name {
                width: 28%;
                font-size: 28rpx;
                color: #979797;
            }
        }
        .mob_tip {
            margin-top: 30rpx;
            font-size: 26rpx;
            color: #999;
            text-align: center;
        }
    }
    .mob_btn {
        width: 80%;
        height: 80rpx;
        line-height: 80rpx;
        border-radius: 40rpx;
        background: #ff5e00;
        color: white;
        position: fixed;
        bottom: 40rpx;
        left: 50%;
        transform: translateX(-50%);
        text-align: center;
    }
}
</style>